<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- el-card 是卡片组件 -->
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- 栅格布局中组件默认将一行划分为24个栅格，然后通过el-col 的span属性来进行布局 -->
        <!-- el-row 是栅格布局的行 -->
        <!-- is-root 是用来区分是不是顶级【也就是这个组织结构的最顶级的管理者，最顶级的管理者的操作不能有删除和编辑操作。】 -->
        <TreeTools
          :tree-node="company"
          :is-root="true"
          @openDialogFn="openDialogFn"
        />
        <!-- el-tree 树形组件和ul\ol差不多 -->
        <el-tree :data="list" :props="defaultProps">
          <!-- 这里我们要自定义el-tree里面的样式和内容，首先我们先去组件文档里看看这个组件是否支持自定义内容，然后我们去看了发现这个组件是可以使用插槽来自定义内容的 -->
          <!-- 插槽作用:这个地方的dom结构是变化的我们也不确定该写什么（因为这里是根据请求回来的数据来写样式的），但这里确实要写东西，那么我们就可以使用插槽先占个位子，以后再写。 -->
          <!-- node是el-tree组件偏底层一点的节点信息，说白了就是用来看看data里面有多少个节点，但node里面存的却是这些节点里面的具体信息 -->
          <!-- data是el-tree组件数据层面上的数据【说白了就是下面的list】 -->
          <template #default="{ data }">
            <TreeTools
              :tree-node="data"
              @delDepartFn="getDepartList()"
              @openDialogFn="openDialogFn"
              @openDialogFn2="openDialogFn2"
            />
          </template>
        </el-tree>
      </el-card>
      <AddDeptVue
        ref="adddept"
        :dialog-visible.sync="dialogVisible"
        :old-depart-list="oldDepartList"
        :pdata="Pdata"
        :title="title"
        @getDepartList="getDepartList()"
      />
      <!-- @closeDialogFn="dialogVisible = false" -->
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartMentList } from '@/api/department'
import AddDeptVue from './components/add-dept.vue'
import { recursionDepartsFn } from '@/utils'
export default {
  components: {
    TreeTools,
    AddDeptVue
  },
  data() {
    return {
      // 问题：如果后台没有按这个数据结构返回数据，那该怎么办
      // 解决：1.让后端改，改成我们想要的数据结构
      // 2.使用组件内置的方法：改成我们想要的数据结构--defaultProps
      // 经过处理的部门列表数据
      list: [],
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      defaultProps: {
        // 建立映射关系，改成我们想要的数据结构
        // tree组件原本的label映射成title
        // tree组件原本的children映射成son
        // children: 'son',
        // label: 'title'
        children: 'children',
        label: 'label'
      },
      // 控制dialog显示与隐藏
      dialogVisible: false,
      // 父级部门的数据
      Pdata: {},
      // 没经过处理的部门列表数据
      oldDepartList: [],
      // 弹窗名称
      title: '',
      loading: false
    }
  },
  created() {
    try {
      this.getDepartList()
    } catch (error) {
      console.log(error)
    }
  },
  methods: {
    // 渲染数据
    async getDepartList() {
      // 当页面数据还没有请求回来的时候我们给加个等待中
      this.loading = true
      const res = await getDepartMentList()
      // 接口返回的数据，都是同级的，不是我们想要的数据结构，怎么办呢?
      // 使用递归（自己调用自己的函数）
      // pid：-1：代表顶级组织架构
      // pid：空字符串：一级组织架构
      // pid：不为空：代表它属于的父级组织架构的id
      // console.log(res)
      this.company.name = res.data.companyName
      this.company.manager = res.data.companyManage || 'BOSS'
      this.company.id = ''

      this.oldDepartList = res.data.depts
      const data = recursionDepartsFn(res.data.depts, '')
      this.list = data
      // console.log(this.list)
      // 当页面数据请求回来之后，我们将等待中取消
      this.loading = false
    },
    // 点击新增部门打开的弹层
    openDialogFn(Pdata, title) {
      // 显示弹窗
      this.dialogVisible = true
      this.Pdata = Pdata
      this.title = title
      // // 获取部门负责人列表
      // this.$refs.adddept.getDepartUser()
    },
    //  点击编辑部门打开的弹层
    openDialogFn2(Pdata, title) {
      this.dialogVisible = true
      this.Pdata = Pdata
      // console.log(Pdata)
      this.title = title
      // // 获取部门负责人列表
      // this.$refs.adddept.getDepartUser()
      // 获取部门详情
      // 有时候会遇见获取部门详情报错，这是因为DOM的更新是异步的
      // 所以我们可以这样写，this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。
      this.$nextTick(() => this.$refs.adddept.getDepartMent(this.Pdata.id))
    }
  }
}
</script>

<style scoped lang="scss">
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}

.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url('~@/assets/common/add-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url('~@/assets/common/minus-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url('~@/assets/common/user-filling.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
